<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>BlueTone Calls</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <style type="text/css">
        .left {float: left;}
        #content {width: 800px;}
    #phone {position: absolute; z-index: 3; top: 38px; left: 12px; width: 113px; height: 126px;}
    #sites {border: 1px solid #666666; background-color: #CCCCCC;}
    #infobar {width: 181px; height: 50px; background: url('callfrom.png') repeat-x; position: absolute; z-index: 2; color: #FFF; padding-left: 119px;}
    hr {width: 50%; margin: 5px auto;}
    .site {margin-bottom: 10px;}
    
    a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(http://www.bluetonemedia.com/images/scripts/calendar.png) no-repeat; 
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
	float: left;
}
#results {background-color: #F2F2F2; display: none;}
#callfrom {width: 52.083%; position: relative; margin: 0 23.95%}
#calllist {margin: 0; padding: 0;}
#calllist li {cursor: pointer; list-style: none; border-bottom: 1px solid #000; margin: 10px 12px;}
#calllist li:last-child {border-bottom: none;}

#results {}
#container {width: auto; margin: auto; font-style: italic}
h2 {font-size: 28px; margin: 0; font-weight: normal;}
h3 {font-size: 24px; font-weight: bold; margin-top: 0;}
h4 {font-size: 16px; font-style: normal; margin-bottom: 0}
.links {font-size: 14px;}
.links a, .links a:hover {color: #000066; text-decoration: none;}
#number {font-size: 18px;}
#address {float: right; text-align: right;}
#container h3+div {margin-bottom: 20px;}
#notes p {margin-top: 0}


#calllist li {
    height: 40px;
    overflow: hidden;
    position: relative;
    display: block;
    background: #fff;
	cursor: pointer;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 4px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

#calllist li a {
    text-align: left;
    color: #333;
    position: relative;
}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 20px;
    text-shadow: 0px 0px 1px #333;
    line-height: 90px;
    position: absolute;
    width: 90px;
    left: 20px;
    text-align: center;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-content{
    position: absolute;
    left: 120px;
    width: 370px;
    height: 60px;
    top: 20px;
}
.name{
    font-size: 30px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-sub{
    font-size: 14px;
    color: #666;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
#calllist li:hover {
    background: #e1f0fa;
}
.ca-menu li:hover .ca-icon{
    font-size: 40px;
    color: #259add;
    opacity: 0.8;
    text-shadow: 0px 0px 13px #fff;
}
#calllist li:hover .name{
    opacity: 1;
    color:#2676ac;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
}
.ca-menu li:hover .ca-sub{
    opacity: 1;
    -webkit-animation: moveFromBottom 300ms ease-in-out;
    -moz-animation: moveFromBottom 300ms ease-in-out;
    -ms-animation: moveFromBottom 300ms ease-in-out;
}
@-webkit-keyframes moveFromBottom {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        opacity: 0;
        -moz-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        opacity: 0;
        -ms-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromTop {
    from {
        opacity: 0;
        -moz-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromTop {
    from {
        opacity: 0;
        -ms-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}
    </style>

    
<script type="text/javascript" src="http://www.bluetonemedia.com/images/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://www.bluetonemedia.com/images/scripts/date.js"></script>
<!--[if lt IE 7]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]-->
<!-- jquery.datePicker.js -->
<script type="text/javascript" src="http://www.bluetonemedia.com/images/scripts/jquery.datePicker.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.bluetonemedia.com/images/scripts/datePicker.css">
<script type="text/javascript">
$(function () {
	getresults();
    setInterval(function () {
						getresults();
    		}, 50000);
	
function getresults() {	
    $.ajax({
		type: "GET",
		url: 'product.xml',
		cache: false,
		success: function(data) {
			if($(data).find('Call').text() != "") {
				var callhistory = '';
			
				$(data).find('Call').each(function() {	
					var check = $(this).find('CRM').text();
					var dateandtime = $(this).find('dateandtime').text();
					var caller = $(this).find('caller').text();
					var source = $(this).find('source').text();
					var to = $(this).find('to').text();
				
					if (source.length == 10) {
						source = "+1" + source;
					} else if (source.length == 11) {
						source = "+" + source;
					}
				
					check == 1 ? check = "CRM&nbsp;&nbsp;" : check = "";
				
					caller = caller.split("<");
					callhistory += '<li>' + check + '' + dateandtime + '&nbsp;&nbsp;<span class="name">' + caller[0] + '</span>&nbsp;<span class="number"><a href="tel:' + source + '">' + source + '</a></span> to ' + to + '</li>';
				
				});
				
				$('#calllist').html(callhistory);
				
				$('#sites span:first').hide();
				
				if($('#results').html() == '') {
					recentResults($('.name:first').text(), $('.number:first').text());
				}
			
				$('#calllist li').click(function () {
					recentResults($('.name', this).text(), $('.number', this).text());
					window.scrollTo(0, 0);
				});
				
			} else {
				$('#sites span:first').show();
			}		
		}
	});
}

function recentResults(firsttext, firstnum) {
	var cnames = firsttext;
	var datastring = "number=" + firstnum;
	
	$.ajax({
		url: 'callinfo3.aspx',
		data: datastring,
		success: function (msg2) {
			if (msg2 == "None") {
				var contactname = cnames.split("\"");
				var contactnumber = firstnum.replace("+",  "");

				$('#results').html(contactname[1] + '<br/><a href="addexisting.aspx?num=' + contactnumber + '">Add to Existing Company</a>&nbsp;&nbsp;&nbsp;<a href="NewCompany.aspx?num=' + contactnumber + '">Create New Company</a><br/>');
				$('#results').fadeIn();
			} else if (msg2 == "Is in the company datatable, but not in the contacts table") {
				 var contactname = cnames.split("\"");
				$('#results').html(contactname[1] + '<br/>' + msg2);
			} else {
				var info = msg2.split("` ");

				$('#infobar span').text(info[0]);

				$('#results').html('<div class="site">' + msg2 + '</div>');
				$('.date').datePicker().val(new Date().asString()).trigger('change');
				$('#results').fadeIn();
			}
		}
	});
}
});
</script>
</head>
<body>
<div id="content">
<div id="results"></div>
<div id="sites"><span>Updating&nbsp<img src="images/dots32.gif" /></span><ul id="calllist"></ul></div>

</div>
</body>
</html>
